window.onload = function () {
    //渲染页面

    var vid = document.getElementById('video_btn');
    var vidLeft = vid.getElementsByClassName('left')[0];
    // 图片渲染进页面
    vidLeft.innerHTML = '<img src="' + videoDetail.poster + '" alt="">';
    //渲染购买免费试学页面

    var vidRight = vid.getElementsByClassName('right')[0];
    vidRight.innerHTML = '<p>\
                    [' + videoDetail.year + '] ' + videoDetail.title + '\
            </p>\
            <p>\
                <span>年级科目: ' + videoDetail.grade + '</span>\
                <span>课时数量: ' + videoDetail.time + '课时</span>\
                <span>开课时间: ' + videoDetail.duration + '</span>\
                <span>有效期至: ' + videoDetail.period + '</span>\
            </p>\
            <p>\
                <span>距报名截止仅剩</span>\
                <span class="timeFn"> </span>\
            </p>\
            <p>\
                <span>￥' + videoDetail.price + '</span>\
                <span class="btn">' + (videoDetail.isFree ? '免费学习' : '付费学习') + '</span>\
            </p>\
            <p>\
                <span>￥' + videoDetail.singlePrice + '单独购买</span>\
                <span></span>\
                <span>￥' + videoDetail.group + '拼团</span>\
            </p>';

    //获取倒计时 天 时 分 秒
    var timeFn = vidRight.getElementsByClassName('timeFn')[0];
    //倒计时
    timeChange();

    setInterval(timeChange, 1000);

    function timeChange() {
        var targetDate = new Date('2021,6,1');
        var time = parseInt((targetDate - (new Date())) / 1000);
        var s = pbc.add0(time % 60);
        var m = pbc.add0(parseInt(time / 60 % 60));
        var h = pbc.add0(parseInt(time / 60 / 60 % 24));
        var t = pbc.add0(parseInt(time / 60 / 60 / 24));

        timeFn.innerHTML = '<b>' + t + '</b> 天 <b>' + h + '</b> 时 <b>' + m + '</b> 分 <b>' + s + '</b> 秒 ';
    }


    //渲染讲师介绍页面
    var teacher = document.getElementById('teacher');
    var teacherDiv = teacher.getElementsByTagName('div')[0];

    teacherDiv.innerHTML = '<span></span>\
    <p>\
        <span>' + videoDetail.teacher + '</span>\
        <span>' + videoDetail.teacherTitle + '</span>\
    </p>\
    <span></span>\
    <p>' + videoDetail.introduce + '\
    </p>';


    //list列表页渲染 
    var catlog = document.getElementsByClassName('catlog')[0];
    var catlogDivHtml = '';



    for (var i = 0; i < classList.length; i++) {

        catlogDivHtml += ' <div><p class="clearfix"><b>' + classList[i].title + ' （含' + classList[i].num + '期）</b><b class="iconfont">&#xeb24;</b></p><ul></ul></div>';
        
    }
    catlog.innerHTML = catlogDivHtml;



    var catlogUls = catlog.getElementsByTagName('ul');
    for(var i =0 ;i<classList.length; i++){

        var catlogUlHtml = '';
        
        
        for (var j = 0; j <  classList[i].list.length; j++) {

            catlogUlHtml += '<li>\
            <span class="iconfont">&#xeb23;</span>\
            <span>' +  classList[i].list[j].name + '</span>\
            <span>' +  classList[i].list[j].time + '开播</span>\
            <span>开播提醒</span>\
            </li>';
            

        }
        catlogUls[i].innerHTML = catlogUlHtml;
    }

    //课程详情大图
    var catlogDetail = document.getElementsByClassName('detail')[0];
    catlogDetail.innerHTML = '<img src="'+ classImgList[0] +'" alt="">'


    //视频播放页渲染























    //视频播放
    //点击免费试学出来目录界面和视频播放页面

    
    var vidRight = vid.getElementsByClassName('right')[0];
    
    var videoBtn = vid.getElementsByClassName('btn')[0];

    videoBtn.onclick = function () {
        window.location.href='../page/video_play.html';
    }




    //课程详情
    //选项卡切换目录和大图
    var catalog = document.getElementById('catalog');
    var catalogBtns = catalog.getElementsByTagName('button');
    var catalogCata = catalog.getElementsByClassName('catlog')[0];

    var catalogCataUl = catalogCata.getElementsByTagName('ul');
   
    catalogCataUl[3].style.display = 'none';
    catalogCataUl[4].style.display = 'none';

    var catalogDeta = catalog.getElementsByClassName('detail')[0];


    catalogBtns[0].onclick = function () {
        catalogCata.style.display = 'block';
        catalogDeta.style.display = 'none';
        catalogBtns[0].className = 'cur';
        catalogBtns[1].className = '';
    }
    catalogBtns[1].onclick = function () {
        catalogCata.style.display = 'none';
        catalogDeta.style.display = 'block';
        catalogBtns[0].className = '';
        catalogBtns[1].className = 'cur';
    }

    //划过目录上的每个li标签 让其显示划过效果
    var catalogCataLis = catalogCata.getElementsByTagName('li');
    catalogCata.onclick = function (evs) {

        var ev = window.event || evs;
        var tar = ev.target || ev.srcElement;
        for (var i = 0; i < catalogCataLis.length; i++) {
            catalogCataLis[i].style.background = '';
            catalogCataLis[i].lastElementChild.style.display = '';
            catalogCataLis[i].lastElementChild.previousElementSibling.style.display = '';
        }
        if (tar.nodeName == 'LI') {
            tar.style.background = '#e5f3ef';
            tar.lastElementChild.style.display = 'block';
            tar.lastElementChild.previousElementSibling.style.display = 'none';
        }
        if (tar.nodeName == 'SPAN') {
            tar.parentNode.style.background = '#e5f3ef';
            tar.parentNode.lastElementChild.style.display = 'block';
            tar.parentNode.lastElementChild.previousElementSibling.style.display = 'none';
        }

    }


    //点击标题上的按钮 让下面的ul标签闭合或者展开
    var catalogCataPs = catalogCata.getElementsByTagName('p');
    catalogCataPs[3].lastElementChild.innerHTML = '&#xeb21;';
    catalogCataPs[4].lastElementChild.innerHTML = '&#xeb21;';
    for (var i = 0; i < catalogCataPs.length; i++) {
        catalogCataPs[i].tet = 1;
        catalogCataPs[3].tet = 2;
        catalogCataPs[4].tet = 2;
        catalogCataPs[i].onclick = function () {
            if (this.tet == 1) {
                this.nextElementSibling.style.display = 'none';
                this.lastElementChild.innerHTML = '&#xeb21;'
                this.tet = 2;
            } else {
                this.nextElementSibling.style.display = 'block';
                this.lastElementChild.innerHTML = '&#xeb24;'
                this.tet = 1;
            }

        }

    }

    //点击展开全部按钮 上面的视频播放列表全部展开

    var btn = document.getElementById('btn')
    btn.onclick = function () {
        for (var i = 0; i < catalogCataUl.length; i++) {
            catalogCataUl[i].style.display = 'block';
            catalogCataPs[i].lastElementChild.innerHTML = '&#xeb24;'
            
            catalogCataPs[i].tet = 1;
        }

    }



}